<!doctype html>
<html ng-app="ngSanitize">
<head>
    <meta charset="UTF-8">
    <script src="test/angular.js"></script>
    <script src="test/angular-sanitize.min.js"></script>
    <style>
        td {
            border: 1px solid #FF0000;
        }
    </style>
</head>
<body>
<div ng-controller="Ctrl">
    Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
    <table>
        <tr>
            <td>Directive</td>
            <td>How</td>
            <td>Source</td>
            <td>Rendered</td>
        </tr>
        <tr id="bind-html-with-sanitize">
            <td>ng-bind-html</td>
            <td>Automatically uses $sanitize</td>
            <td>
                <pre><div ng-bind-html="snippet"><br/></div></pre>
            </td>
            <td>
                <div ng-bind-html="snippet"></div>
            </td>
        </tr>
        <tr id="bind-html-with-trust">
            <td>ng-bind-html</td>
            <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
            <td>
    <pre><div ng-bind-html="deliberatelyTrustDangerousSnippet()">
        t;/div></pre>
            </td>
            <td>
                <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>
            </td>
        </tr>
        <tr id="bind-default">
            <td>ng-bind</td>
            <td>Automatically escapes</td>
            <td>
                <pre><div ng-bind="snippet"><br/></div></pre>
            </td>
            <td>
                <div ng-bind="snippet"></div>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    angular.module('app', ['ngSanitize']);
    function Ctrl($scope, $sce) {
        $scope.snippet =
                '<p style="color:blue">an html\n' +
                        '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
                        'snippet</p>';
        $scope.deliberatelyTrustDangerousSnippet = function () {
            return $sce.trustAsHtml($scope.snippet);
        };
    }

</script>
</html>